<template>
  <div id="hisHB">
    <div class="login-head">
      <span style="color: #fff" @click="jumpFn()">
        <van-icon name="arrow-left"
      /></span>
      <span class="login-title">历史红包</span>
      <span></span>
    </div>
    <ul class="historyHBAll">
      <li v-for="(v, i) in historyhistoryHongbaolist" :key="i">
        <div class="Fzlink">
          <div class="history-leftB">
            <div class="amount">
              <p class="logo-money">￥{{ v.amount }}.{{ v.amount }}</p>
            </div>

            <p class="left-mj">{{ v.description_map.sum_condition }}</p>
          </div>
          <div class="hongbao-right">
            <div class="item-left">
              <h4>{{ v.name }}</h4>
              <p>{{ v.description_map.validity_periods }}</p>
              <p
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ v.description_map.phone }}
              </p>
            </div>
          </div>
          <div class="hongbao-time">
            <p>已过期</p>
          </div>
        </div>
        <div class="wink">
          <div class="limit-map" v-if="v.limit_map != null">
            <p>{{ v.limit_map.restaurant_flavor_ids }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "historyHB",
  data() {
    return {
      historyhistoryHongbaolist: [],
    };
  },
  mounted() {},
  methods: {
    jumpFn() {
      this.$router.back();
    },
  },
  created() {
    let api =
      "https://elm.cangdu.org/promotion/v2/users/1/expired_hongbaos?limit=20&offset=0";
    this.$http({
      url: api,
      method: "GET",
      user_id: 1,
    }).then((res) => {
      console.log(res.data);
      this.historyhistoryHongbaolist = res.data;
    });
  },
};
</script>

<style scoped>
.item-left > h4 {
  color: #666;
  font-size: 0.4459rem;
}
.historyHBAll li{
    border-radius: 5px;
}
.wink p {
  width: 9.4865rem;
  line-height: 0.9392rem;
  background-color: #f9f9f9;
  margin: 0 auto;
  padding: 0 0.2703rem;
  box-sizing: border-box;
  /* position: absolute; */
}
.hongbao-time {
  color: #ddd;
  width: 1.9189rem;
  height: 1.9189rem;
  line-height: 1.9189rem;
  text-align: center;
  font-size: 0.3514rem;
  border: 0.0541rem solid #ddd;
  border-radius: 50%;
}
.hongbao-right {
  margin-left: 0.2703rem;
}
.limit-map {
  color: #999;
  font-size: 0.3243rem;
  display: flex;
  align-items: center;
}
.item-left > p {
  color: #999;
  font-size: 0.3243rem;
}
.left-mj {
  font-size: 0.3514rem;
  color: #999;
}
.logo-money {
  font-size: 0.473rem;
  color: #ccc;
}
.hongbao-right {
}
.amount-money {
  font-size: 1.2432rem;
  color: #ccc;
}
.logo-money {
    margin-top: 0.2703rem;
  color: #ccc;
  font-size: 0.6486rem;
}
.history-leftB {
  width: 2.6576rem;
  height: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  border-right: 0.027rem dotted #ccc;
}
.login-head {
  width: 100%;
  height: 1.2576rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
  position: fixed;
  top: 0;
  left: 0;
}
.login-title {
  color: white;
  position: relative;
  left: -0.5405rem;
  font-size: 0.5405rem;
}
#hisHB {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  z-index: 21;
}
.historyHBAll {
  width: 100%;
  margin: 0 auto;
  margin-top: 1.6216rem;
}

.Fzlink {
  width: 9.4865rem;
  height: 3.1351rem;
  background-color: #fff;
  margin: 0.2703rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.2703rem;
  box-sizing: border-box;
}
</style>